<template>
  <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
    <a-breadcrumb-item>分店管理</a-breadcrumb-item>
    <a-breadcrumb-item>分店信息管理</a-breadcrumb-item>
  </a-breadcrumb>

  <a-button
    type="primary"
    @click="openAdd"
    ghost
    style="margin: -30px 20px 10px 10px; font-size: 15px; float: right"
    >创建店铺</a-button
  >

  <a-table
    :columns="columns"
    :data-source="page.list"
    :pagination="pagination"
    @change="handleTableChange"
  >
    <!-- 插入名称为stid的插槽 -->
    <template #stid="{ text }"> 分店{{ text }} </template>

    <template #opr="{ record }">
      <a-button @click="openUpd(record)">修改</a-button>
      <a-divider type="vertical" />
      <a-button type="danger" @click="execDel(record.br_id)">关闭</a-button>
      <a-divider type="vertical" />
      <a-button @click="viewDetails(record)">查看员工</a-button>
    </template>
  </a-table>

  <!-- 新增窗口 -->
  <a-modal v-model:visible="visible" title="创建店铺" @ok="execAdd">
    <a-form
      :model="addObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="分店编号">
        <a-input v-model:value="addObj.br_id" />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="addObj.br_name" />
      </a-form-item>
      <a-form-item label="地址">
        <a-input v-model:value="addObj.br_address" />
      </a-form-item>
    </a-form>
  </a-modal>

  <!-- 修改窗口 -->
  <a-modal v-model:visible="visible2" title="修改分店信息" @ok="execUpd">
    <a-form
      :model="updObj"
      :label-col="{ span: 5 }"
      :wrapper-col="{ span: 14 }"
    >
      <a-form-item label="分店编号">
        <a-input v-model:value="updObj.br_id" disabled />
      </a-form-item>
      <a-form-item label="名称">
        <a-input v-model:value="updObj.br_name" />
      </a-form-item>
      <a-form-item label="创建时间">
        <a-input v-model:value="updObj.br_time" disabled />
      </a-form-item>
      <a-form-item label="地址">
        <a-input v-model:value="updObj.br_address" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { ref, reactive } from "vue";
import { get, post, put, del, tip } from "@/common";

export default {
  setup(props, { emit }) {
    // const currPage = ref("branch");

    const columns = [
      {
        dataIndex: "br_id", //服务端数据
        title: "分店编号", //表头项名称
        align: "center",
        //slots定义插槽，即将开发者自定义的内容嵌入
        slots: {
          customRender: "stid", //定义插槽名称，即以stid为名插槽的数据插入该列位置
        },
      },
      {
        dataIndex: "br_name",
        title: "名称",
        align: "center",
      },
      {
        dataIndex: "br_time",
        title: "创建时间",
        align: "center",
      },
      {
        dataIndex: "br_address",
        title: "地址",
        align: "center",
      },
      {
        key: "opr",
        title: "操作",
        align: "center",
        slots: {
          customRender: "opr",
        },
      },
    ];

    //分页处理-start
    const query = reactive({}); //定义查询参数

    const page = ref({}); //接收服务端返回的分页对象

    //分页引擎
    const pagination = reactive({
      current: 1, //当前页
      pageSize: 10, //每页记录数
      total: 0, //总记录数
      pageSizeOptions: ["5", "10", "20", "30", "50"], //每页记录下拉框的选型
      showSizeChanger: true, //是否展示每页记录数下拉框
      showQuickJumper: true, //是否展示快速跳转
      showTotal: (total, range) => {
        //展示总页数等文字说明信息的
        return (
          "共" +
          total +
          "条记录,当前第" +
          pagination.current +
          "页" +
          (range[1] - range[0] + 1) +
          "条记录"
        );
      },
    });

    //获取当前分页
    const getPage = (pageNum = 1) => {
      query.pageNum = pageNum;
      query.pageSize = pagination.pageSize;

      get("/branch/information", query).then((res) => {
        page.value = res.data; //将服务端传来的分页数据赋值予page

        //更新分页引擎
        pagination.current = page.value.current;
        pagination.pageSize = page.value.pageSize;
        pagination.total = page.value.total;
      });
    };
    getPage(1); //页面首先加载第一页

    //当分页发送变化时（如：页码、每页记录数变化时）
    const handleTableChange = (
      pagi,
      filters,
      sorter,
      { currentDataSource }
    ) => {
      pagination.current = pagi.current;
      pagination.pageSize = pagi.pageSize;
      pagination.total = pagi.total;

      getPage(pagination.current);
    };

    //分页处理-end

    //新增
    const addObj = reactive({
      br_id: "",
      br_name: "",
      br_time: "",
      br_address: "",
    });
    const visible = ref(false);
    const openAdd = () => {
      //打开窗口
      visible.value = true;
    };
    const execAdd = () => {
      //执行新增
      post("/branch/information", addObj).then((res) => {
        addObj.br_id = "";
        addObj.br_name = "";
        addObj.br_time = "";
        addObj.br_address = "";
        visible.value = false;
        tip.success("创建店铺成功！");
        getPage(page.value.current);
      });
    };

    //修改
    const updObj = reactive({
      br_id: "",
      br_name: "",
      br_time: "",
      br_address: "",
    });
    const visible2 = ref(false);
    const openUpd = (st) => {
      updObj.br_id = st.br_id;
      updObj.br_name = st.br_name;
      updObj.br_time = st.br_time;
      updObj.br_address = st.br_address;
      //打开窗口
      visible2.value = true;
    };
    const execUpd = () => {
      //执行修改
      put("/branch/information", updObj).then((res) => {
        updObj.br_id = "";
        updObj.br_name = "";
        updObj.br_time = "";
        updObj.br_address = "";
        visible2.value = false;
        tip.success("修改分店信息成功！");
        getPage(page.value.current);
      });
    };

    //删除
    const execDel = (br_id) => {
      del("/branch/information/" + br_id).then((res) => {
        tip.success("关闭分店成功！");
        getPage(page.value.current);
      });
    };

    //查看详情
    const viewDetails = (rec) => {
      //向父组件发送事件, 切换到详情
      emit("toDetails", rec); //发送事件时可以带参数
    };

    return {
      // currPage,
      columns,
      query,
      page,
      pagination,
      getPage,
      handleTableChange,
      addObj,
      visible,
      openAdd,
      execAdd,
      updObj,
      visible2,
      openUpd,
      execUpd,
      execDel,
      viewDetails,
    };
  },
};
</script>

<style scoped>
</style>